import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  setup() {
    const list = ref([
      {
        id: 1,
        firstName: '',
        lastName: '',
        count: '',
      },
      {
        id: 2,
        firstName: '',
        lastName: '',
        count: '',
      }
    ])
    const getRandomElement = (arr: any[]) => {
      return arr[Math.floor(Math.random() * arr.length)];
    }
    const setData = (idx: number) => {
      let firstName = getRandomElement(['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '蒋', '沈', '韩', '杨', '朱', '何', '张', '魏']);
      let lastName = getRandomElement(['**', '**', '**', '*']);
      let count = getRandomElement(['1', '1', '2', '2', '3', '3', '4', '5']);
      list.value[idx].firstName = firstName;
      list.value[idx].lastName = lastName;
      list.value[idx].count = count;
    }
    const swiperChange = (idx: number) => {
      setData(idx);
    }
    onMounted(() => {
      setData(0);
      setData(1);
    })
    return () => (
      <nut-swiper auto-play={3000} loop direction="vertical" style={{ height: '14px', lineHeight: '15px' }} onChange={swiperChange}>
        {
          list.value.map((item: any) => (
            <nut-swiper-item>
              <span style={{ fontSize: '13px' }}>{item.firstName}{item.lastName}已为{item.count}位家人进行参保</span>
            </nut-swiper-item>
          ))
        }
      </nut-swiper>
    )
  },
})